<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>全屏原生JS视差效果/模拟P.js引擎库</title>
        <link rel="stylesheet" href="./style.css">
        <script src="./script.js"></script>
    </head>

    <body>
        <div class="parallax-scene" id="scene">
            <div class="parallax-layer" data-depth="0.1">
                <img src="./img/0.png" alt="背景天空">
            </div>
            <div class="parallax-layer" data-depth="0.2">
                <img src="./img/1.png" alt="远山">
            </div>
            <div class="parallax-layer" data-depth="0.4">
                <img src="./img/2.png" alt="中景树林">
            </div>
            <div class="parallax-layer" data-depth="0.6">
                <img src="./img/3.png" alt="近景树林">
            </div>
            <div class="parallax-layer" data-depth="0.8">
                <img src="./img/4.png" alt="前景地面">
            </div>
            <div class="parallax-layer" data-depth="1.0">
                <img src="./img/5.png" alt="前景光影">
            </div>
        </div>
    </body>

</html>
